<div id="wrapper"> 
    <div id="header"> 
        <!--headeeeeeeeeer--!>
        <!--start of search area-->
        <div id="searchArea"> 

            <div class="clear"></div>
            <div>
                <div id="panel" style="display: block;">
                    <div class="content clearfix">
                        <div class="left">
                            <h1>Welcome to our advanced search</h1>
                            <h2>Search for priced/free images</h2>
                            <p class="grey">You can search our stock by images name , album name , owner name , date !</p>
                            <br />
                            <p class="grey">kindly read our policy before using <a title="Read more" href="#">more »</a></p>
                        </div>
                        <div class="left">
                            <form method="post" action="#" class="clearfix">
                                <h1 class="padlock">Image information :</h1>
                                <label for="log" class="grey">Image Name:</label>
                                <input type="text" size="23" value="" id="s_img" name="log" class="field"/>
                                <label for="album" class="grey">Album Name:</label>
                                <input type="text" size="23" id="s_album" name="album" class="field"/>
                                <label for="owner" class="grey">Owner Name:</label>
                                <input type="text" size="23" id="s_owner" name="owner" class="field">
                                <div class="clear"></div>
                            </form>
                        </div>
                        <div class="left right">
                            <form method="post" action="#">
                                <h1>Date :</h1>
                                <label for="signup" class="grey">Date From:</label>
                                <input type="text" size="23" value="" id="s_dFrom" name="signup" class="field">
                                <label for="email" class="grey">Date To:</label>
                                <input type="text" size="23" id="s_dTo" name="email" class="field">
                                <input type="button" class="bt_search" value="search" name="search" id="searchB" url="<?php echo url_for('search/advSearch') ?>"/>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of search area--> 

            <!--start of gallery-->
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner"> <a href=""> 
                            <img id="slide-img-1" src="/images/nature-photo.png" class="slide" alt="" /> </a> <a href=""> 
                            <img id="slide-img-2" src="/images/nature-photo1.png" class="slide" alt="" /> </a> <a href=""> 
                            <img id="slide-img-3" src="/images/nature-photo2.png" class="slide" alt="" /> </a> <a href=""> 
                            <img id="slide-img-4" src="/images/nature-photo3.png" class="slide" alt="" /> </a> <a href=""> 
                            <img id="slide-img-5" src="/images/nature-photo4.png" class="slide" alt="" /> </a> <a href=""> 
                            <img id="slide-img-6" src="/images/nature-photo4.png" class="slide" alt="" /> </a> <a href=""> 
                            <img id="slide-img-7" src="/images/nature-photo6.png" class="slide" alt="" /> </a>
                        <div id="slide-controls">
                            <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
                            <p id="slide-desc" class="text"></p>
                            <p id="slide-nav"></p>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
                </script> 
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <a id="closeGallery"></a>
    <!--end of gallery-->


    <!--start of search controls-->
    <div id="searchInfo">Search Photos, Illustrations, and Vector Art <span>Displaying results 1 - 100 of 5,507.</span> </div>
    <div class="clear"></div>
    <div id="conrolsContainer">
        <ul id="displayOptions">
            <li> Show:
                <label>
                    <input type="radio" value="50" name="images_per_page" checked="checked" onclick="search(1)"/>
                    50 </label>
                |
                <label class="selected">
                    <input type="radio"  value="100" name="images_per_page" onclick="search(2)"/>
                    100 </label>
                |
                <label>
                    <input type="radio" value="150" name="images_per_page" onclick="search(5)"/>
                    150 </label>
            </li>
        </ul>
        <div class="clear"></div>
        <ul id="switchView">
            <li> Display:
                <label>
                    <input type="radio" value="50" name="display"/>
                    Tabler view </label>
                |
                <label class="selected">
                    <input type="radio" checked="checked" value="100" name="display"/>
                    Thumbnails </label>
            </li>
        </ul>
        <div class="clear"></div>
        <div id="sorters"> Sort by :
            <button> <a href="#" onclick="sort('image')">Image name</a></button>
            <button> <a href="#" onclick="sort('album')">Album name</a></button>
            <button><a href="#" onclick="sort('category')">Category</a></button>
            <button><a href="#" onclick="sort('owner')">Owner name</a></button>
            <button><a href="#" onclick="sort('rate')">Rate</a></button>
            <button><a href="#" onclick="sort('date')">Date</a></button>
            <button><a href="#" onclick="sort('price')">Price</a></button>
        </div>
    </div>
    <!--end of search controls-->
    <div class="clear"></div>

    <!-- ---------------------------------Search Result--------------------------------------------- -->
    <div id="searchPartial">
        <?php include_partial('search/searchResult', array('pager' => $pager)) ?>
    </div>
</div>


<script type="text/javascript">
    $('#searchB').click(function() {
//        alert($('#s_img').attr('value')  );//+ 'albumName' + $('#s_album').attr('value') + 'ownerName' + $('#s_owner').attr('value') + 'dateFrom' + $('#s_dFrom').attr('value') + 'dateTo'  + $('#s_dTo').attr('value'));
       search(10);
    });
    var x = 10;
    var p =1;
    var s ='image';
    
    function search(num){
        x = num;
        pagination(p);
    }
    
    function pagination(page){
        p=page;
        sort( s );
    }
    
    function sort(sorter){
        s = sorter;
        $.get(
        "<?php echo url_for('search/sort') ?>",
        {imgName: $('#s_img').attr('value'), albumName: $('#s_album').attr('value'), ownerName: $('#s_owner').attr('value'), dateFrom: $('#s_dFrom').attr('value'), dateTo: $('#s_dTo').attr('value'), numImages: x, page: p, sorter: s},
        function(responseText){
            $('#searchPartial').html(responseText);
            $('input[type=radio].star').rating();
            $('.zoom').bezoom();
        },
        'html');
    }
</script>